<template>
  <div>
    <el-dialog style="height: 100vh;" :title="title" :close-on-click-modal="false" :visible.sync="visible" center>
      <el-button class="miui-dialog-close-btn" @click="visible = false">关闭页面</el-button>
      <div style="height: calc(80vh - 150px);overflow: auto;">
        <el-form :model="dataForm" :rules="dataRule" ref="dataForm" label-width="120px">
          <el-form-item label="角色名称" prop="roleName">
            <el-input v-model="dataForm.roleName" :disabled="type == 'check'"></el-input>
          </el-form-item>
          <el-form-item label="角色标识" prop="roleCode">
            <el-input v-model="dataForm.roleCode" :disabled="type == 'check' || type == 'update'"></el-input>
          </el-form-item>
          <el-form-item label="角色类型" prop="roleType">
            <el-select v-model="dataForm.roleType" >
              <el-option v-for="item in roleTypeOptions" :value="item.value" :label="item.label" :key="item.value"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="角色描述" prop="roleDesc">
            <el-input v-model="dataForm.roleDesc" :disabled="type == 'check'"></el-input>
          </el-form-item>

          <el-form-item label="数据权限" prop="dsType">
            <el-select v-model="dataForm.dsType" :disabled="type == 'check'">
              <el-option v-for="item in dsTypeOptions" :value="item.value" :label="item.label" :key="item.value"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item v-if="dataForm.dsType == '1'">
            <el-tree
              ref="scopeTree"
              :data="deptTree"
              :check-strictly="true"
              :props="defaultProps"
              :default-checked-keys="checkedKeys"
              class="filter-tree"
              node-key="id"
              highlight-current
              show-checkbox/>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button v-if="type != 'check'" type="primary" @click="dataFormSubmit" :loading="ischeck" v-prevent-re-click>保 存</el-button>
      </span>
    </el-dialog>
    <!-- <search-supply v-if="supplyVisible" ref="supplyDialog" @refreshData="getSupplyData"></search-supply> -->
  </div>
</template>

<script>
  import { mapGetters } from 'vuex'
  import { getObj, addObj, putObj } from '@/api/admin/role'
  import { fetchTree } from '@/api/admin/dept'
  import { remote } from '@/api/admin/dict'

  export default {
    data() {
      return {
        visible: false,
        type: '',
        title: '',
        ischeck: false,
        dsTypeOptions: [],
        roleTypeOptions: [],
        dataForm: {
          id: '',
          roleName: '',
          roleCode: '',
          roleDesc: '',
          roleType: '',
          dsType: ''
        },
        dataRule: {
          roleName: [{required: true,message: '角色名称不能为空',trigger: 'blur'}],
          roleCode: [{required: true,message: '角色标识不能为空',trigger: 'blur'}],
          dsType: [{required: true,message: '数据权限不能为空',trigger: 'blur'}]
        },
        deptTree: [],
        defaultProps: {
          label: 'name',
          value: 'id'
        },
        checkedKeys: [],
      }
    },
    components: {
    },
    computed: {
      ...mapGetters(['bizData'])
    },
    methods: {
      init(type,id) {
				console.log(id)
        this.dataForm.id = id || 0
        this.visible = true
        this.type = type
        if(type == 'add'){
          this.title = '角色新增'
        }else if(type == 'update'){
          this.title = '角色修改'
        }else if(type == 'check'){
          this.title = '角色详情'
        }
        remote('ds_type').then(result => {
          this.dsTypeOptions = result.data.data
        })
        remote('role_type').then(result => {
            this.roleTypeOptions = result.data.data
        })
        this.$nextTick(() => {
          this.$refs['dataForm'].resetFields()
          if(this.dataForm.id) {
            getObj(this.dataForm.id).then(response => {
              this.dataForm = response.data.data
              this.$set(this.dataForm,'dsType','' + this.dataForm.dsType)
            })
            fetchTree().then(result => {
              this.deptTree = result.data.data
              if (this.dataForm.dsScope) {
                this.checkedKeys = (this.dataForm.dsScope).split(',')
              } else {
                this.checkedKeys = []
              }
              //console.log(this.checkedKeys)
            })
          }
        })
      },
      // 表单提交
      dataFormSubmit() {
        this.ischeck = true
        this.$refs['dataForm'].validate((valid) => {
          if (valid) {
            if (this.dataForm.roleId) {
              putObj(this.dataForm).then(data => {
                this.$message.success('修改成功')
                this.visible = false
                this.$emit('refreshDataList')
                setTimeout(() => {
                  this.ischeck = false
                })
              }).catch(() => {
                this.ischeck = false
              })
            } else {
              addObj(this.dataForm).then(data => {
                this.$message.success('添加成功')
                this.visible = false
                this.$emit('refreshDataList')
                setTimeout(() => {
                  this.ischeck = false
                })
              }).catch(() => {
                this.ischeck = false
              })
            }
          }else{
            this.ischeck = false
          }
        })
      }
    }
  }
</script>
